<template>
  <div id="app2">
         <div class='loading' v-loading="loading" v-if='loading'></div>
         <div v-show='againModel' class='againModel' @touchstart.prevent="modelPrevent">
            <div class='model-content' >
                <el-row>
                    <el-col :span='8' style='height:40px;line-height:150px;text-align:center;color:white'>
                        正面
                    </el-col>
                    <el-col :span='14' style='height:150px;' class='model-face'>
                        <div style='height:100%;'>
                            <img :src="imgShowJson.face" width='100%' height="100%">     
                        </div>
                    </el-col>
                </el-row>
                <el-row style='margin-top:10px;'>
                    <el-col :span='8' style='height:40px;line-height:150px;text-align:center;color:white'>
                        反面
                    </el-col>
                    <el-col :span='14' style='height:150px;' class='model-back'>
                        <div style='height:100%;'>
                            <img :src="imgShowJson.back" width='100%' height="100%">
                        </div>
                    </el-col>
                </el-row>
                <el-row style='margin-top:30px'>
                    <el-col :span='4' :offset='13' >
                        <div @touchstart="againModel=false">
                            <el-button 
                                style='width:100%;' 
                                size='small' 
                                type='info'
                            >
                                取消
                            </el-button>
                        </div>
                        
                    </el-col>
                    <el-col :span='4' :offset='1'>
                        <div @touchstart="submitForm">
                            <el-button 
                                style='width:100%;' 
                                size='small' 
                                type='danger'
                            >
                                确定
                            </el-button>
                        </div>
                        
                    </el-col>
                </el-row>
            </div>
         </div>
         <div id='oil-wrap1'>
             <h1 class='oil-h1'>身份认证（必填）</h1>
             <el-row class='oil-base'>
                 <el-col :span='11'>
                     <div class='show-idcard img-face-idcard'> 
                         <input 
                            v-if='offFile'
                            type="file"
                            id='face'
                            @change="upimg('#face','face','.img-face-idcard')"
                         >  
                         <img 
                            :src="imgShowJson.face" 
                            v-if='imgShowJson.face'
                            alt="face" 
                            width='100%' 
                            height="100%"
                         >
                         <div class='camera-wrap' v-else>
                            <div class='camera-bg'></div>
                             <p>上传身份证正面照</p>
                         </div>
                     </div>
                 </el-col>
                 <el-col :span='11' :offset='2'>
                     <div class='show-idcard img-back-idcard'> 
                         <input 
                            v-if='offFile'
                            type="file"
                            id='back'
                            @change="upimg('#back','back','.img-back-idcard')"
                         >
                         <img 
                            v-if='imgShowJson.back'
                            :src="imgShowJson.back" 
                            alt="face" 
                            width='100%' 
                            height="100%">
                         <div class='camera-wrap' v-else>
                            <div class='camera-bg'></div>
                             <p>上传身份证背面照</p>
                         </div>
                     </div>
                 </el-col>
             </el-row>
             <el-row class='oil-base' style='border-top:none;'>
                 <el-col :span='5'>
                     手机号
                 </el-col>
                 <el-col :span='19'>
                     <input type="text" placeholder="请输入手机号" v-model='formdata.phone'>
                 </el-col>
             </el-row>
             <el-row class='oil-base'>
                 <el-col :span='5'>
                     验证码
                 </el-col>
                 <el-col :span='10'>
                     <input type="text" placeholder="请输入验证码" v-model='code'>
                 </el-col>
                 <el-col :span='7'>
                     <span 
                        style='color:#d47d5a;' 
                        v-if='openInvitation'
                        @click='sendmsg'
                     >
                        获取验证码
                     </span> 
                     <span class='invitation-wrap' v-else>【 <span class='invatation-num'></span> 】</span>
                 </el-col>
             </el-row>
         </div>
         
         <div id='oil-wrap1'>
            <el-row class='oil-base'>
                 <el-col :span='5'>
                     真实姓名
                 </el-col>
                 <el-col :span='19'>
                     <input type="text" placeholder="请输入姓名" v-model='formdata.nametrue'>
                 </el-col>
             </el-row>
             <el-row class='oil-base'>
                 <el-col :span='5'>
                     身份证号
                 </el-col>
                 <el-col :span='19'>
                     <input type="text" placeholder="请输入身份证号" v-model='formdata.idcard'>
                 </el-col>
             </el-row>
             <el-row class='oil-base' style='border-bottom: 1px solid #f5f2f2;'>
                 <el-col :span='5'>
                     邀请码
                 </el-col>
                 <el-col :span='19'>
                     <input type="text" placeholder="请输入邀请码" v-model='formdata.code'>
                 </el-col>
             </el-row>
         </div>
         <p class='sure-id-card'>*请认真核对姓名和身份证号，不一致请重新上传</p>
         <p class='bg'></p>
         <div id='oil-wrap2'>
             <h1 class='oil-h1'>行驶证认证</h1>
             <el-row class='oil-base'>
                 <el-col :span='12'>
                     <div class='show-idcard img-xinsi-idcard'> 
                         <input 
                            v-if='offFile'
                            type="file"
                            id='drivingCard'
                            @change="upimg('#drivingCard','xinsi','.img-xinsi-idcard')"
                         >
                         <img 
                            v-if='imgShowJson.xinsi'
                            :src="imgShowJson.xinsi" 
                            alt="drivingCard" 
                            width='100%' 
                            height="100%" 
                         >
                         <div v-else class='camera-wrap' >
                            <div class='camera-bg'></div>
                             <p>上传行驶证照片</p>
                         </div>
                     </div>
                 </el-col>
             </el-row>
         </div>
         <p class='bg'></p>
         <div id='oil-wrap3'>
             <h1 class='oil-h1'>
                 收货方式
             </h1>
             <el-row class='oil-base'>
                 <el-col :span='9'>
                     <div class='radion-change radion-selfGet' @click='receivend("selfGet")'>
                         到店领取
                     </div>
                 </el-col>
                 <el-col :span='9'>
                     <div class='radion-change radion-express radion-yes' @click='receivend("express")'>
                         快递到家
                     </div>
                 </el-col>
             </el-row>
             <div style='padding-bottom:20px;color:#b0b5bd;display:none;' class='selfGet'> 
                 请到<span style='color:black;'> <span>{{invitationName}}</span> </span>领取
             </div>
             <div class='express'>
                 <el-row class='oil-base'>
                     <el-col :span='5'>
                         收货人
                     </el-col>
                     <el-col :span='19'>
                         <input type="text" placeholder="请输入收货人姓名" v-model='formdata.name'>
                     </el-col>
                 </el-row>
                 <el-row class='oil-base'>
                     <el-col :span='5'>
                         收货电话
                     </el-col>
                     <el-col :span='19'>     
                         <input type="text" placeholder="请填写收货人电话" v-model='formdata.tel'>
                     </el-col>
                 </el-row>
                 <el-row class='oil-base'>
                     <el-col :span='5' class='change-area'>
                         选择地区
                     </el-col>
                     <el-col :span='19'>
                        <el-row>
                            <el-col :span='8'>
                                <el-select 
                                    class='change-input'
                                    @focus='getPro' 
                                    @change='getCity' 
                                    v-model='formdata.province' 
                                    placeholder="省"
                                >
                                      <el-option
                                        v-for='(val,index) in province'
                                        :key='index'
                                        :label="val.name"
                                        :value="val.name">
                                      </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span='8' style='height:100%;'>
                                <el-select 
                                    class='change-input'
                                    @change='getArea' 
                                    v-model='formdata.city'
                                    placeholder="市"
                                >
                                  <el-option
                                    v-for='(val,index) in city'
                                    :key='index'
                                    :label="val.name"
                                    :value="val.name">
                                  </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span='8' style='height:100%;'>
                                <el-select 
                                    class='change-input'
                                    v-model='formdata.area' 
                                    placeholder="区">
                                      <el-option
                                        v-for='(val,index) in area'
                                        :key='index'
                                        :label="val.name"
                                        :value="val.name">
                                      </el-option>
                                    </el-select>
                            </el-col>
                        </el-row>
                         
                     </el-col>
                 </el-row>
                 <el-row class='oil-base'>
                     <el-col :span='5'>
                         详细地址
                     </el-col>
                     <el-col :span='19'>
                         <input type="text" placeholder="如街道、楼牌号等" v-model='formdata.address'>
                     </el-col>
                 </el-row>
             </div>
         </div>
         <div style='padding: 18px 15px 0px;font-size: 13px;line-height: 16px;' class='notice-oil'>
             温馨提示：我们统一用顺丰到付为您邮寄上门，收卡后您需支付11元快递费
         </div>
         <div class='submit-wrap' @click='submitForm'> 
             <el-button class='submit-btn'>提交</el-button>
         </div>
         <div class='oil-bottom' v-if='shijiancuo'>
         </div>
         
  </div>
</template>
<script>
import {URL_CARD,AJAX,URL_OIL_APPLY,URL_SEND_SHORTMES,URL_CHECK_CODE,_layer,HREF,URL_GET_OILCODE,URL_UPIMG,SHIJIAN,URL_XINSHIZHEN} from '@/comm.js'
export default {
  beforeCreate: function() {
    $("title").text("填写资料");
  },
  data: function() {
    return {
      code:'',
      //控制change只能传一次的情况
      offFile:true,
      offzhen:false,  //是判断传没传图片
      offfan:false,
      //监控文件是否传完毕
      listenceFile:{
        'face':false,
        'back':false,
        'xinshi':true
      },
      //预览图片的base64
      imgShowJson:{
        face:'',
        back:'',
        xinsi:''
      },
      //初始化预览图片节点的高
      init:{
        face:'',
        back:'',
        xinsi:'',
      },
      shijiancuo:true,
      loading:false,
      openInvitation:true,
      againModel:false,
      province:[],
      city:[],
      invitationName:'',
      area:[],
      formdata: {
        "nametrue":"",          //真实姓名 
        "idcard":"",            //身份证号
        "phone":'',           //手机号
        "cardPositiveImg":"",   //身份证正面url
        "cardSideImg":"",       //身份证背面url
        "drivingImg":'',        //行驶证url
        // 'invitationNum':'',     //邀请人num
        'code':'',     //邀请人code
        "name":"",              //收货人名字 
        "tel":"",               //收货电话 
        "province":"",          //1 省 
        "city":"",              //2 市
        "area":"",              //3 区
        "address":"",            //地址
        'drivingLicense':'',               //行驶证
      },
    };
  },
  mounted: function() {
    let This=this;
    setTimeout(function() { 
      var h = $(window).height();
      $("#app2").css("min-height",h+"px");
      $('.el-form-item__label').css('width','120px');
      $('.el-form-item__content').css('margin-left','120px');
      $('#change-margin-left1 .el-form-item__content:first').css('margin-left','0');
      $('#change-margin-left2').css('padding','7px 7px');
      $('#change-margin-left2').parent().css('margin-left','0');
      $('input').css({
        padding:'0',
      });
      $('.change-input input').css('height',$('.change-area').height()+'px');
      This.init.face=$('.img-face-idcard').height(); 
      This.init.back=$('.img-back-idcard').height(); 
      This.init.xinsi=$('.img-xinsi-idcard').height(); 
    }, 300);
  },
  created(){
    this.getInvitationNum();
    let nowtime=SHIJIAN-Math.round(new Date() / 1000);
    nowtime>0?this.shijiancuo=true:this.shijiancuo=false;
  },
  watch:{
    invitationName(newval,oldval){
        this.getInvitationNum();
    }
  },
  methods: {
    //得到邀请人和num
    getInvitationNum(){
        let This=this;
        $.post(URL_GET_OILCODE,function(data){
          This.formdata.code=data.data.invitationCode;
          This.invitationName=data.data.invitationName;
        })
    },
    //得到省
    getPro(){
      let This=this;
      $.get('http://restapi.amap.com/v3/config/district?key=8a454c271117032d451bb2accb197952',function(data){
        This.province=data.districts[0].districts;
      })
    },
    //得到市
    getCity(){
      let This=this;
      $.get(`http://restapi.amap.com/v3/config/district?key=8a454c271117032d451bb2accb197952&keywords=${this.formdata.province}&subdistrict=2`,function(data){
        This.city=data.districts[0].districts;
      })
    },
    //用于阻止弹窗的下拉时候会冒泡到背景下面的内容滚动
    modelPrevent(){
    },
    //得到区县
    getArea(){
      let This=this;
      $.get(`http://restapi.amap.com/v3/config/district?key=8a454c271117032d451bb2accb197952&keywords=${this.formdata.city}&subdistrict=2`,function(data){
        This.area=data.districts[0].districts;
      })
    },
    //提交申请油卡数据
    submitForm: function() {
      let This=this;
      if(!(this.offzhen&&this.offfan)){
        _layer('请传身份证信息');
        return ;
      }
      This.loading=true;
      let time=setInterval(function(){
          for(let y in This.listenceFile){
            if(!This.listenceFile[y]){
                return ;
            }
          }
          clearInterval(time);
          let ruleSend={
            "nametrue":"真实姓名",          //真实姓名
            "idcard":"身份证号",            //身份证号
            "phone":'手机号',               //手机号
            'cardPositiveImg':'身份证正面',
            'cardSideImg':'身份证背面',
            'code':'邀请人',       //邀请人num
          };   
          for(let i in This.formdata){
            if(i=='name'||i=='tel'||i=='address'||i=='province'||i=='city'||i=='area'||i=='drivingImg'||i=='drivingLicense'){
              continue ;
            }
            let valOff=String(This.formdata[i]).trim();
            if(!valOff||valOff=='null'||valOff=='undefined'){
              if(i=='code'){
                This.formdata.code='857026';
                continue ;
              }
              _layer(ruleSend[i]+'不能为空');
              This.loading=false;
              return ;
            }
          }
          if(!(This.checkMobile(This.formdata.phone))){
            This.formdata.phone='';
            _layer('手机号格式有误');
            This.loading=false;
            return ;
          }
          //验证输入的验证码是否正确
          $.get(URL_CHECK_CODE+'?phone='+This.formdata.phone+'&code='+This.code.trim(),function(data){
            if(!data.retult){
              _layer(data.message);
              This.loading=false;
              return ;
            }
            if(!This.againModel){
                $('.model-content').css('top',($(window).height()-380)/2+'px');
                This.againModel=true;
                This.loading=false;
                return ;
            }
            $.ajax({
                url:URL_OIL_APPLY,
                type:'post',
                data:JSON.stringify(This.formdata),
                dataType:'json', 
                headers:{ 
                  Accept:"application/json", 
                  "Content-Type":"application/json"
                }, 
                cache:false,
                processData:false,
                success:function(data){
                  This.loading=false;
                  This.againModel=false;
                  if(data.retult){
                    _layer('油卡信息提交成功');
                    setTimeout(function(){
                      window.location.href=HREF+'/show-oil.html';
                    },4000);
                  }else{
                    _layer(data.message);
                    setTimeout(function(){
                      window.location.href=HREF+'/extension.html';
                    },4000);
                  }
                }
            });
          });
      },2);
    },
    //身份证正反面 
    upimg(inputel,zhenfan,wrap){
         this.offFile=false;
         let This=this;
         let file = $(inputel).get(0).files[0];
         let reader = new FileReader();
         if (file) {
           reader.readAsDataURL(file);
         } else{
            _layer('请传正确的图片文件');
         }
         let send=new FormData();
         send.append('file',file);
         send.append('faceRect',zhenfan);
         This.loading=true;
         switch(zhenfan){
            case 'face':
                This.offzhen=true;
                setTimeout(()=>{this.shenfenCard(send,zhenfan)});
                $(wrap).css('height',this.init.face);
                break ;
            case 'back':
                This.offfan=true;
                setTimeout(()=>{this.shenfenCard(send,zhenfan)});
                $(wrap).css('height',this.init.back);
                break ;
            case 'xinsi':
                setTimeout(()=>{this.drvingUp(file)});
                $(wrap).css('height',this.init.xinsi);
         }
         reader.onloadend = function () {
            //创建放原图的节点
            let img=$('<img id="yashou-img">');
            img.css({
              position:'absolute',
              left:'-100000px'
            });
            $('body').append(img);
            $(img).attr('src',reader.result);
            setTimeout(function(){
                //得到传的图片的实际宽高
                let imghei=$(img).height();
                let imgwid=$(img).width();
                let sca=imghei/imgwid;
                //得到父级的宽高
                let elwid=$(wrap).width();
                let elhei=sca*elwid;
                $(wrap).css('height',elhei);
                This.imgShowJson[zhenfan]=reader.result;
                This.offFile=true;
                This.loading=false;
            },3000)
         }
    },

    //处理上传身份证
    shenfenCard(send,zhenfan){
        let This=this;
        this.listenceFile[zhenfan]=false;
        $.ajax({
             url:URL_CARD,
             type:'post',
             data:send, 
             cache:false,
             processData:false,
             contentType:false,
             success:function(data){
               This.listenceFile[zhenfan]=true;
               if(data.retult){
                   switch(zhenfan){
                       case 'face':
                           //把正面照放进formdata  
                           This.formdata.cardPositiveImg=data.data.url;
                           This.formdata.nametrue=data.data.data.name;
                           This.formdata.idcard=data.data.data.num;
                           break ;
                       case 'back':
                           //把背面照放进formdata
                           This.formdata.cardSideImg=data.data.url;
                           break ;
                   }
               }else{
                   _layer(data.message);
               }
             }
         });
    },

    //上传行驶证
    drvingUp(file){
        let This=this;
        // var file = $('#drivingCard').get(0).files[0];
        let send=new FormData();
        let xinshi=new FormData();
        xinshi.append('file',file);
        send.append('file',file);
        send.append('businessName','行驶证');
        this.listenceFile['xinshi']=false;
        $.ajax({
            url:URL_XINSHIZHEN,
            type:'post',
            data:xinshi, 
            cache:false,
            processData:false,
            contentType:false,
            success:function(data2){
                let data1=JSON.parse(data2);
                if(data1.words_result['号牌号码'].words){
                     $.ajax({
                        url:URL_UPIMG,
                        type:'post',
                        data:send, 
                        cache:false,
                        processData:false,
                        contentType:false,
                        success:function(data){
                            This.listenceFile['xinshi']=true;
                            if(data.retult){
                                This.formdata.drivingImg=data.data[0];
                                This.formdata.drivingLicense=data1;
                            }else{

                                _layer(data.message);
                            }
                        }
                    });
                }else{
                    This.listenceFile=true;
                    _layer('请传正确的行驶证');
                }
            }
        });
    },
    //验证手机号正则
    checkMobile(sMobile){ 
      let str=String(sMobile).trim(); 
      if(str.length==11&&str.slice(0,1)=='1'){
        return true;
      }else{
        _layer('请输入正确的手机号');
        return false; 
      }
    },
    //发送验证码
    sendmsg: function(ev) {
      let This=this;
      //关闭发送验证码按钮
      if(!this.checkMobile(this.formdata.phone)){
        this.formdata.phone='';
        return ;
      }
      this.openInvitation=false;
      AJAX({
        method:'get',
        url:URL_SEND_SHORTMES+'?phone='+this.formdata.phone,
      },function(data){
         var s = 60;
         var t = setInterval(() => {
           $('.invatation-num').text(`${s}秒`);
           if (s == 0) {
             clearInterval(t);
             This.openInvitation=true;
           }
           s--;
         }, 1000);
      });
    },
    //快递到家/到店领取
    receivend(val){
        switch(val){
            case 'selfGet':
                //到店领取
                $('.express').hide();
                $('.notice-oil').hide();
                $('.radion-selfGet').addClass('radion-yes');
                $('.radion-express').removeClass('radion-yes');
                $('.selfGet').slideDown(200);
                break ;
            case 'express':
                //快递到家
                $('.selfGet').hide();
                $('.radion-express').addClass('radion-yes');
                $('.radion-selfGet').removeClass('radion-yes');
                $('.notice-oil').show();
                $('.express').slideDown(200);
                break ;
        }
    }
  }
};

</script>
<style>
input:focus{
  outline: none;
}
#app2 .formlist {
  padding: 10px 15px 10px 15px;
  background-color: white;
  border-bottom: 1px solid #f1f0f0;
  height: auto;
}
#app2 .formlist input {
  border: 0px;
}
#app2 .formlist .el-form-item {
  margin-bottom: 0px;
}
#app2 .formlist .paizhao {
  position: relative;
  width: 150px;
  height: 100px;
  border: 1px dashed #ccc;
  margin-top: 15px;
  margin-left: 15px;
  text-align: center;
  line-height: 100px;
  color: #ccc;
  font-size: 40px;
}
#app2 .formlist .paizhao .upfile {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100px;
  line-height: 0px;
  opacity: 0;
}
#app2 .formlist .paizhao .upfile input {
  width: 100%;
  height: 100px;
}
#app2 .formlist .el-form-item__label {
  text-align: left;
}
input::-webkit-input-placeholder{
  font-size: 13px;
  color: #bfc3cb;
}
.againModel{
    position:fixed;
    z-index: 1;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
}
.model-content{
    position:absolute;
    width: 100%;
    height:380px;
    z-index:100;
}



/*第二版的油卡*/
.bg{
    height:15px;
}
#oil-wrap1,#oil-wrap2,#oil-wrap3{
    padding: 0 15px;
    background: white;
}
.oil-h1,.oil-base{
    padding: 20px 0;
    border-top: 1px solid #f5f2f2;
}
.oil-h1{
    font-weight: 600;
    font-size:16px;
    border-top: none;
}
.show-idcard{ 
    height: 110px;
    position: relative;
    border:1px dashed #d0d0d0;
}
.show-idcard input{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
}
.camera-wrap{
    height: 100%;
}
.camera-wrap .camera-bg{
    height:60%;
    background: url('../static/img/xiangji.png') no-repeat;
    background-size: 35px 25px;
    background-position:50% 65%;
}
.camera-wrap p{
    text-align: center;
    color:#9d9d9d;
}
.sure-id-card{
    padding:15px;
    border-bottom:1px solid #f5f2f2;
    background:white;
    color:red;
    font-size:13px;
}
.radion-change{
    text-indent: 25px;
    background-image: url(../static/img/circle-no.png);
    background-size: contain ; 
    background-repeat: no-repeat;
}
.radion-yes{
    background-image: url(../static/img/circle-yes.png);
}
.submit-wrap{
    margin-top: 35px;
    margin-bottom: 20px;
    padding: 0 15px;
}
.submit-btn{
    width:100%;
    padding:10px 20px;
    background: #f99253;
    color: white;
}
.invitation-wrap{
    color: red;
    font-weight: 900;
}
.change-input input{
    height:100%;
    border:none;
}
.oil-bottom{
    width:100%;
    height:120px;
    background: url('../static/img/oil-bottom.png') no-repeat;
    background-size:100% 100%;
}
.loading{
    position: fixed;
    top:0;
    right: 0;
    left: 0;
    bottom:0;
    z-index:10;
}
</style>


